<template>
	<view class="back-view" @touchmove.stop.prevent="moveHandle">
		<view class="view-background"></view>
		<view class="white-view-back">
			<view class="top-back">
				<view class="top-name">订单与服务</view>
				<view class="close-back" @click="closeBtnAction">
					<image class="close-img" src="../../../static/close.png"></image>
				</view>
			</view>

			<view class="top-line"></view>
			<view v-if="select == 0 || select == 1">
				<view class="select-back-back">
					<view class="center-select-back" @click="clickSelectOne">
						<view :class="select == 0?'celter-select':'celter-unselect'">服务权益</view>
						<view :class="select == 0?'celter-select-line':'celter-unselect-line'"></view>
					</view>
					<view class="center-select-back" @click="clickSelectTwo">
						<view :class="select == 1?'celter-select':'celter-unselect'">我的订单</view>
						<view :class="select == 1?'celter-select-line':'celter-unselect-line'"></view>
					</view>
				</view>
				<scroll-view class="scroll-back" scroll-y="true">
					<view v-if="select == 0">
						<view class="serve-item-back" v-for="(item,index) in serveList">
							<image class="serve-item-img" src="../../../static/phone/mine_serve_bg.png"></image>
							<view class="serve-item-left">
								<view class="serve-item-left-num">{{item.surplusCount}}</view>
								<view class="serve-item-left-des">剩余咨询数</view>
								<view class="serve-item-left-date">（{{item.endTime}}到期）</view>
							</view>
							<view class="serve-item-left serve-item-center">
								<view class="serve-item-center-name">关联客户：{{item.custName}}</view>
								<view class="serve-item-center-back">
									<view class="serve-item-center-dot"></view>
									<view class="serve-item-left-des">可发起咨询数：{{item.cycleTimes}}次</view>
								</view>
								<view class="serve-item-center-back">
									<view class="serve-item-center-dot"></view>
									<view class="serve-item-left-des">可咨询领域：{{item.domainDict}}</view>
								</view>
								<view class="serve-item-center-back">
									<view class="serve-item-center-dot"></view>
									<view class="serve-item-left-des">
										{{item.cycleDes}}
									</view>
								</view>
							</view>
							<view class="serve-item-left serve-item-right">
								<view class="serve-item-right-num">{{item.no}}</view>
								<view v-if="item.status.code == '0'|| item.status.code == '1' "
									class="serve-item-right-btn">发起咨询</view>
								<image v-if="item.status.code == '2'" class="serve-item-overdue"
									:src="mine_serve_old"></image>
								<image v-if="item.status.code == '4'" class="serve-item-overdue"
									:src="mine_serve_cancel"></image>
							</view>
						</view>
					</view>
					<view class="order-back" v-if="select == 1">
						<view class="order-item-back" v-for="(item,index) in orderList"
							@click="clickOrderItemAction(item)">
							<image class="order-item-img" :src="item.goodsPicUrls"></image>
							<view class="order-item-name">{{item.goodsName}}</view>
							<view class="order-item-des">关联客户：{{item.custName}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view v-if="select == 2">
				<scroll-view class="scroll-detail-back" scroll-y="true">
					<view class="scroll-detail-item">
						<view class="scroll-detail-name">订单编号:</view>
						<view class="scroll-detail-content">{{goodItem.no}}</view>
					</view>
					<view class="scroll-detail-item">
						<view class="scroll-detail-name">订单状态:</view>
						<view class="scroll-detail-content">{{goodItem.status.desc}}</view>
					</view>
					<view class="scroll-detail-item">
						<view class="scroll-detail-name">下单时间:</view>
						<view class="scroll-detail-content">{{goodItem.paidTime}}</view>
					</view>
					<view class="scroll-detail-item">
						<view class="scroll-detail-name">下单人:</view>
						<view class="scroll-detail-content">{{goodItem.buyerName}} {{goodItem.buyerMobile}}</view>
					</view>
					<view class="scroll-detail-item">
						<view class="scroll-detail-name">支付金额:</view>
						<view class="scroll-detail-content">{{goodItem.paidAmt}}</view>
					</view>
					<view class="scroll-detail-item">
						<view class="scroll-detail-name">关联客户:</view>
						<view class="scroll-detail-content">{{goodItem.custName}}</view>
					</view>
					<view class="scroll-detail-item">
						<view class="scroll-detail-name">购买商品:</view>
						<view class="scroll-detail-goods-back">
							<image class="scroll-detail-goods-img" :src="goodItem.goodsPicUrls"></image>
							<view class="scroll-detail-goods-name">{{goodItem.goodsName}}</view>
						</view>
					</view>
					<view class="scroll-detail-item">
						<view class="scroll-detail-name scroll-detail-name2">服务权益：</view>

					</view>

					<view class="scroll-detail-item">
						<view class="scroll-detail-name scroll-detail-name3">权益ID:</view>
						<view class="scroll-detail-content">{{goodItem.customerRights.no}}</view>
					</view>
					<view class="scroll-detail-item">
						<view class="scroll-detail-name scroll-detail-name3">服务有效期:</view>
						<view class="scroll-detail-content">{{goodItem.customerRights.totalDay}}天</view>
					</view>
					<view class="scroll-detail-item">
						<view class="scroll-detail-name scroll-detail-name3">可发起总咨询数:</view>
						<view class="scroll-detail-content">
							{{goodItem.customerRights.totalCount}}
						</view>
						<view class="scroll-detail-content">
							{{goodItem.customerRights.cycleDes}}
						</view>
					</view>
					<view class="scroll-detail-item">
						<view class="scroll-detail-name scroll-detail-name3">可咨询领域:</view>
						<view class="scroll-detail-content">{{goodItem.customerRights.domainDict}}</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	let app = ''
	
	export default {
		data() {
			return {
				role: '',
				roleUrl: '',
				serveList: [],
				select: 0,
				orderList: [],
				goodItem: {},
				mine_serve_old:getApp().globalData.baseImageUrl+'/mine_serve_old.png',
				mine_serve_cancel:getApp().globalData.baseImageUrl+'/mine_serve_cancel.png',
			}
		},
		mounted() {
			app = getApp()
			var _this = this
			_this.role = app.globalData.role
			_this.roleUrl = _this.$roleUrl({
				tab: _this.role
			})
			this.requestData();
			this.requestOrderData();
		},
		methods: {
			//权益网络请求
			async requestData() {
				let _this = this
				let parmas = {
					size: 10000,
				}
				console.log(parmas)
				const res = await this.$myRequest({
					url: `/${_this.roleUrl}/customerRights/list`,
					method: 'POST',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					var arr = [];
					for (var i = 0; i < res.data.data.list.length; i++) {
						var item = res.data.data.list[i];
						//剩余咨询数
						if (item.totalCount == -1) {
							item.surplusCount = '不限'
						} else if (item.totalCount && item.usedCount) {
							item.surplusCount = (item.totalCount - item.usedCount).toString() + '次'
						} else {
							item.surplusCount = '0次'
						}

						//到期时间
						if (item.endTime) {
							var timeArr = item.endTime.split(" ");
							if (timeArr.length) {
								item.endTime = timeArr[0];
							}
						}

						//领域
						var str = item.domainDict
						if (str.includes('-1')) {
							var str1 = str.replace(/-1/g, '不限')
							item.domainDict = str1
						}
						//周期限制
						if (item.cycleValue && item.cycleUnit && item.cycleTimes) {
							if (item.cycleTimes == -1) {
								item.cycleTimes = '不限'
								item.cycleDes = '限制每' + item.cycleValue + item.cycleUnit.desc + '咨询次数不限'
							} else {
								item.cycleDes = '限制每' + item.cycleValue + item.cycleUnit.desc + '只可咨询' + item
									.cycleTimes +
									'次'
							}
						} else {
							item.cycleDes = '周期内咨询次数不限'
						}
						arr.push(item)
					}

					_this.serveList = arr;
				}
			},

			//订单网络请求
			async requestOrderData() {
				let _this = this
				let parmas = {
					size: 10000,
				}
				console.log(parmas)	
				const res = await this.$myRequest({
					url: `/${_this.roleUrl}/goodsOrder/list`,
					method: 'POST',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					var arr = [];
					for (var i = 0; i < res.data.data.list.length; i++) {
						var item = res.data.data.list[i];
						item.goodsPicUrls = _this.$imageUrls({
							picUrls: item.goodsPicUrls,
							height: 300
						})

						arr.push(item)
						console.log(item.picUrls)
					}
					_this.orderList = arr;
				}
			},
			//订单网络请求
			async requestOrderDetailData() {
				let _this = this
				
				const res = await this.$myRequest({
					url: `/${_this.roleUrl}/goodsOrder/` + this.goodItem.id,
					method: 'GET',
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.goodItem = res.data.data;
					//商品图片
					if (_this.goodItem.goodsPicUrls) {
						_this.goodItem.goodsPicUrls = _this.$imageUrls({
							picUrls: _this.goodItem.goodsPicUrls,
							height: 200
						})
					}
					//	支付金额
					if (_this.goodItem.paidAmt) {
						_this.goodItem.paidAmt = '¥' + (_this.goodItem.paidAmt / 100).toFixed(2);
					}

					//权益
					var customerRights = _this.goodItem.customerRights

					//剩余咨询数
					if (customerRights.totalCount == -1) {
						customerRights.totalCount = '不限'
					}
					//领域
					var str = customerRights.domainDict
					if (str.includes('-1')) {
						var str1 = str.replace(/-1/g, '不限')
						customerRights.domainDict = str1
					}
					//周期限制
					if (customerRights.cycleValue && customerRights.cycleUnit && customerRights.cycleTimes) {
						if (customerRights.cycleTimes == -1) {
							customerRights.cycleTimes = '不限'
							customerRights.cycleDes = '限制每' + customerRights.cycleValue + customerRights.cycleUnit
								.desc + '咨询次数不限'
						} else {
							customerRights.cycleDes = '限制每' + customerRights.cycleValue + customerRights.cycleUnit
								.desc + '只可咨询' + customerRights
								.cycleTimes +
								'次'
						}
					} else {
						customerRights.cycleDes = '周期内咨询次数不限'
					}
					_this.goodItem.customerRights = customerRights

				}
			},
			clickOrderItemAction(item) {
				this.goodItem = item;
				this.select = 2;
				this.requestOrderDetailData();
			},
			clickSelectOne() {
				this.select = 0;
			},
			clickSelectTwo() {
				this.select = 1;
			},
			closeBtnAction() {
				if (this.select == 2) {
					this.select = 1
				} else {
					this.$emit('orderServeClose')
				}
			},
			moveHandle() {
				return true
			},
		},
	}
</script>

<style>
	.back-view {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 199;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.view-background {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 100;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.white-view-back {
		width: 552px;
		height: 500px;
		padding: 24px;
		max-height: 500px;
		background-color: white;
		margin-top: -50px;
		border-radius: 4px;
		z-index: 101;
		position: absolute;
	}

	.top-back {
		display: flex;
		justify-content: space-between;
	}

	.top-name {
		font-size: 18px;
		font-weight: normal;
		color: #333333;

	}

	.close-back {
		cursor: pointer;
		width: 20px;
		height: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.close-img {
		width: 12px;
		height: 12px;
	}

	.top-line {
		height: 1px;
		background: #EEEEEE;
		width: 100%;
		margin-top: 20px;
		margin-bottom: 10px;
	}

	.select-back-back {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	.center-select-back {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		height: 44px;
		margin-left: 36px;
		margin-right: 36px;
	}

	.celter-unselect {
		font-size: 16px;

		font-weight: 400;
		color: #999999;
	}

	.celter-select {
		font-size: 16px;

		font-weight: 400;
		color: #333333;
	}

	.celter-select-line {
		width: 40px;
		height: 2px;
		background: #2DA9C5;
	}

	.celter-unselect-line {
		width: 40px;
		height: 2px;
	}

	.scroll-back {
		width: 100%;
		height: 400px;

	}

	.serve-item-back {
		display: flex;
		align-items: center;
		position: relative;
		width: 100%;
		height: 141px;
	}

	.serve-item-img {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;
		z-index: 102;
	}

	.serve-item-left {
		margin-left: 20px;
		width: 120px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 200;
	}

	.serve-item-left-num {
		font-size: 24px;
		font-weight: 600;
		color: #FF6132;
	}

	.serve-item-left-des {
		font-size: 12px;
		font-weight: 400;
		color: #999999;
		margin-top: 6px;
	}

	.serve-item-left-date {
		font-size: 12px;
		font-weight: 400;
		color: #666666;
	}

	.serve-item-center {
		align-items: flex-start;
		margin-left: 10px;
		width: 225px;
		max-width: 225px;

	}

	.serve-item-center-name {
		font-size: 14px;
		font-weight: 600;
		color: #333333;
	}

	.serve-item-center-back {
		display: flex;
		align-items: center;

	}

	.serve-item-center-dot {
		width: 4px;
		min-width: 4px;
		height: 4px;
		background: #8ED8E9;
		border-radius: 50%;
		margin-right: 6px;
	}

	.serve-item-right {
		display: flex;
		flex-direction: column;
		justify-content: start;
		height: 100%;
		width: 150px;
	}

	.serve-item-right-num {
		font-size: 10px;
		font-weight: 400;
		color: #999999;
		margin-top: 28px;
	}

	.serve-item-right-btn {
		width: 104px;
		height: 32px;
		background: #2DA9C5;
		border-radius: 2px;
		font-size: 14px;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 15px;
	}

	.serve-item-overdue {
		width: 70px;
		height: 51px;
		margin-top: 14px;
	}

	.order-back {
		display: inline-flex;
		flex-wrap: wrap;
	}

	.order-item-back {
		margin-right: 16px;
		margin-top: 16px;
		width: 168px;
	}

	.order-item-img {
		width: 168px;
		height: 168px;
		border: 1px solid #eee;
	}

	.order-item-name {
		font-size: 14px;
		font-weight: 600;
		color: #333333;
		margin-top: 10px;
		height: 40px;
	}

	.order-item-des {
		font-size: 12px;
		font-weight: 400;
		color: #999999;
		margin-top: 2px;
	}

	.scroll-detail-back {
		width: 100%;
		height: 430px;
		background-color: #EEEEEE;
	}

	.scroll-detail-item {
		display: flex;
		/* 	align-items: center; */
	}

	.scroll-detail-name {
		width: 100px;
		font-size: 14px;
		font-weight: 400;
		color: #999999;
		text-align: right;
		margin-top: 10px;
	}

	.scroll-detail-name2 {
		font-weight: 600;
		color: #333333;
	}

	.scroll-detail-name3 {
		width: 130px;
	}

	.scroll-detail-content {
		font-size: 14px;
		font-weight: 400;
		color: #333333;
		margin-left: 20px;
		margin-top: 10px;
	}

	.scroll-detail-goods-back {
		width: 410px;
		height: 85px;
		background: #F7F7F7;
		border-radius: 4px;
		display: flex;
		margin-left: 20px;
		margin-top: 10px;
		align-items: center;
	}

	.scroll-detail-goods-img {
		width: 65px;
		height: 65px;
		border-radius: 4px;
		border: 1px solid #EEEEEE;
		margin-left: 10px;
	}

	.scroll-detail-goods-name {
		font-size: 14px;
		font-weight: 600;
		color: #333333;
		margin-left: 10px;
	}
</style>
